// 将此文件内容复制到App.js，运行npm start即可查看效果。
import React, { useCallback, useState } from 'react';
import {
  ReactFlow,
  Handle,
  useNodesState,
  useEdgesState,
  addEdge,
} from 'reactflow';
import 'reactflow/dist/style.css';
import { faUser, faChevronDown, faChevronUp } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';

const CustomIconNode = ({ data, id, setNodes }) => {
  const [isExpanded, setIsExpanded] = useState(false);

  const togglePanel = () => {
    setIsExpanded(!isExpanded);
  };

  return (
    <div style={{ background: 'lightblue', padding: '10px', borderRadius: '5px' }}>
      <div onClick={togglePanel} style={{ cursor: 'pointer' }}>
        <FontAwesomeIcon icon={faUser} /> {data.label}
        <FontAwesomeIcon icon={isExpanded ? faChevronUp : faChevronDown} style={{ marginLeft: '10px' }} />
      </div>
      {isExpanded && (
        <div style={{ marginTop: '10px', background: 'white', padding: '10px', borderRadius: '5px' }}>
          This is the expandable panel content.
        </div>
      )}
    </div>
  );
};

const nodeTypes = {
  customNode: CustomIconNode,
};

// 节点配置
const node1 = {
  id: '1',
  type: 'customNode',
  data: { label: 'Font Awesome Node' },
  position: { x: 100, y: 100 },
};

const initialNodes = [node1];
const initialEdges = [];

export default function App() {
  const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
  const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);

  const onConnect = useCallback(
    (params) => setEdges((eds) => addEdge(params, eds)),
    [setEdges]
  );

  return (
    <div style={{ width: '100vw', height: '100vh' }}>
      <ReactFlow
        nodes={nodes}
        edges={edges}
        nodeTypes={nodeTypes}
        onNodesChange={onNodesChange}
        onEdgesChange={onEdgesChange}
        onConnect={onConnect}
        fitView
      />
    </div>
  );
}